<template>
  <div class="auth-wrapper">
    <div class="main-wrapper">
      <div class="option-box">
        <el-button type="primary" v-has="'dept:add'" @click="addDept">添加部门</el-button>
      </div>

      <TreeTable :data="treeData" stripe :expandAll="true">
        <el-table-column prop="deptName" label="部门名称">
          <template slot-scope="scope">
            <ExpandIcon :row="scope.row" :index="scope.$index"/>
            {{scope.row.deptName}}
          </template>
        </el-table-column>
        <el-table-column prop="seq" label="排序号"/>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{transformDict('status',scope.row.state)}}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"/>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" v-has="'dept:update'" @click="editDept(scope.$index, scope.row)">编辑</el-button>
            <el-button type="text" class="text-button-del" v-has="'dept:delete'" @click="delDept(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </TreeTable>
    </div>

    <!-- 弹框 -->
    <el-dialog :title="dialog.dialogTitle"
      :visible.sync="dialog.dialogVisible"
      width="35%"
      :modal-append-to-body=false
      :close-on-click-modal=false
      :close-on-press-escape=false>
      <el-form ref="deptForm" :model="deptForm" :inline=true :rules="deptFormRules" label-position="right" label-width="80px">
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="deptForm.deptName" placeholder="请输入部门名称" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="父节点">
          <el-input v-model="deptForm.parentName" class="handle-icon">
            <el-button @click="openInnerDialog" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="deptForm.state" placeholder="请选择状态" class="handle-select">
            <el-option v-for="(item, index) in deptState" :key="index" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" prop="seq">
          <el-input v-model.number="deptForm.seq" placeholder="请输入排序号" class="handle-input"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="deptForm.remark" placeholder="请输入备注" class="handle-textarea"></el-input>
        </el-form-item>
      </el-form>

      <!--内层dialog-->
      <el-dialog title="选择父节点"
        :visible.sync="dialog.innerVisible"
        width="20%"
        append-to-body>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :default-expand-all=true
          :highlight-current=true
          :expand-on-click-node=false
          node-key="id"
          ref="deptTree">
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="selectParent">确 定</el-button>
        </span>
      </el-dialog>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.dialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="dialog.submitLoading"  @click="deptFormSubmit">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as dept from '@/api/dept'
import {TreeTable, ExpandIcon} from '@/components/TreeTable'
import {mapGetters} from 'vuex'

export default {
  name: 'Dept',
  components: {TreeTable, ExpandIcon},
  data () {
    return {
      deptForm: {
        id: '',
        parentId: '',
        parentName: '',
        deptName: '',
        state: '',
        seq: '',
        remark: ''
      },
      defaultProps: {
        children: 'children',
        label: 'deptName'
      },
      treeData: [],
      dialog: {
        dialogVisible: false, // 弹窗
        dialogTitle: '', // 弹窗标题
        submitLoading: false,
        innerVisible: false // 内层弹框
      },
      isEdit: false, // 是否为修改操作
      tableLoading: true,

      deptFormRules: {
        deptName: [{required: true, message: '部门不能为空', trigger: 'blur'}],
        seq: [
          {required: true, message: '排序号不能为空', trigger: 'blur'},
          {type: 'integer', message: '排序号必须为整数', trigger: 'blur'}
        ],
        remark: [{max: 200, message: '最多200个字符', trigger: 'blur'}]
      }
    }
  },
  methods: {
    transformDict (key, code) {
      return this.dictinfo(this.GLOBAL.dictKey[key], code);
      // return code;
    },
    getTree () {
      dept.treeData().then(res => {
        this.treeData = [...res.data];
      })
    },
    addDept () {
      this.isEdit = false;
      this.dialog.dialogVisible = true;
      this.dialog.dialogTitle = '添加';
    },
    editDept (index, row) {
      this.isEdit = true;
      this.dialog.dialogTitle = '编辑';
      dept.getById(row.id).then(res => {
        this.deptForm = {...res.data};
        this.deptForm.parentName = row.parent ? row.parent.deptName : '';
        this.dialog.dialogVisible = true;
      });
    },
    deptFormSubmit () {
      this.$refs.deptForm.validate(valid => {
        if (!valid) {
          return false;
        }
        this.dialog.submitLoading = true;
        let param = this.GLOBAL.handlerQueryParam({
          ...this.deptForm
        });
        if (this.isEdit) {
          dept.editDept(param)
            .then(res => {
              this.dialog.submitLoading = false;
              this.dialog.dialogVisible = false;
              this.getTree();
            })
            .catch(() => {
              this.dialog.submitLoading = false;
            })
        } else {
          dept.addDept(param)
            .then(res => {
              this.dialog.submitLoading = false;
              this.dialog.dialogVisible = false;
              this.getTree();
            })
            .catch(() => {
              this.dialog.submitLoading = false;
            })
        }
      })
    },
    delDept (index, row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          dept.delDept(row.id)
            .then(res => {
              this.$message.success('删除成功');
              this.getTree();
            });
        })
    },
    openInnerDialog () {
      this.dialog.innerVisible = true;
    },
    selectParent () {
      let parentNode = this.$refs.deptTree.getCurrentNode();
      if (parentNode) {
        this.deptForm.parentId = parentNode.id;
        this.deptForm.parentName = parentNode.deptName;
      }
      this.dialog.innerVisible = false;
    }
  },
  computed: {
    ...mapGetters(['dictinfo', 'dictList']),
    deptState () {
      return this.dictList(this.GLOBAL.dictKey['status']);
    }
  },
  created () {
    this.getTree();
  },
  watch: {
    'dialog.dialogVisible' (val, old) {
      if (!val) { // val为false(关闭dialog)
        this.$refs.deptForm.resetFields();
        this.GLOBAL.clearObject(this.deptForm);
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
